<template>
  <div class="page-content">
    <!-- 顶部导航 -->
    <header class="bg-white shadow-sm sticky top-0 z-10">
      <div class="container mx-auto px-4 py-3 flex items-center">
        <router-link to="/" class="mr-2">
          <i class="fas fa-arrow-left text-gray-600"></i>
        </router-link>
        <h1 class="text-lg font-semibold">诉讼费计算</h1>
      </div>
    </header>

    <main class="container mx-auto px-4 mt-4">
      <div class="bg-white rounded-xl shadow-md p-6">
        <h2 class="text-lg font-semibold mb-4">诉讼费计算器</h2>
        <p class="text-sm text-gray-500 mb-6">
          根据诉讼标的金额计算应缴纳的诉讼费用
        </p>

        <!-- 计算参数 -->
        <div class="space-y-4 mb-6">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              诉讼标的金额（元）
            </label>
            <input
              v-model.number="claimAmount"
              type="number"
              placeholder="请输入诉讼标的金额"
              class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none"
            />
          </div>

          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              是否适用简易程序
            </label>
            <div class="flex space-x-4">
              <label class="flex items-center">
                <input
                  v-model="isSimple"
                  type="radio"
                  :value="true"
                  class="mr-2"
                />
                <span>是</span>
              </label>
              <label class="flex items-center">
                <input
                  v-model="isSimple"
                  type="radio"
                  :value="false"
                  class="mr-2"
                />
                <span>否</span>
              </label>
            </div>
          </div>
        </div>

        <!-- 计算按钮 -->
        <button
          @click="calculateFee"
          class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 px-4 rounded-lg font-medium"
          :disabled="!canCalculate"
        >
          <i class="fas fa-calculator mr-2"></i>
          计算诉讼费
        </button>

        <!-- 计算结果 -->
        <div v-if="calculationResult" class="mt-6">
          <h3 class="text-md font-semibold mb-3">计算结果</h3>
          <div class="bg-gray-50 rounded-lg p-4 space-y-3">
            <div class="flex justify-between">
              <span class="text-sm font-medium text-gray-700">案件受理费：</span>
              <span class="text-blue-600 font-medium">¥{{ calculationResult.acceptanceFee }}</span>
            </div>
            <div class="flex justify-between">
              <span class="text-sm font-medium text-gray-700">其他费用：</span>
              <span class="text-gray-600">¥{{ calculationResult.otherFees }}</span>
            </div>
            <div class="border-t pt-3">
              <div class="flex justify-between">
                <span class="text-sm font-medium text-gray-700">总计：</span>
                <span class="text-lg font-bold text-blue-600">¥{{ calculationResult.totalFee }}</span>
              </div>
            </div>
            <div class="text-xs text-gray-500 mt-2">
              {{ calculationResult.notes }}
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  name: 'LitigationFeeCalculator',
  setup() {
    const claimAmount = ref('')
    const isSimple = ref(false)
    const calculationResult = ref(null)

    const canCalculate = computed(() => {
      return claimAmount.value > 0
    })

    const calculateFee = () => {
      const amount = claimAmount.value
      let acceptanceFee = 0
      
      // 简化的诉讼费计算逻辑
      if (amount <= 10000) {
        acceptanceFee = 50
      } else if (amount <= 100000) {
        acceptanceFee = 50 + (amount - 10000) * 0.025
      } else if (amount <= 200000) {
        acceptanceFee = 2300 + (amount - 100000) * 0.02
      } else if (amount <= 500000) {
        acceptanceFee = 4300 + (amount - 200000) * 0.015
      } else if (amount <= 1000000) {
        acceptanceFee = 8800 + (amount - 500000) * 0.01
      } else if (amount <= 2000000) {
        acceptanceFee = 13800 + (amount - 1000000) * 0.009
      } else {
        acceptanceFee = 22800 + (amount - 2000000) * 0.008
      }

      // 简易程序减半
      if (isSimple.value) {
        acceptanceFee = acceptanceFee * 0.5
      }

      const otherFees = 0 // 其他费用
      const totalFee = acceptanceFee + otherFees

      calculationResult.value = {
        acceptanceFee: acceptanceFee.toFixed(2),
        otherFees: otherFees.toFixed(2),
        totalFee: totalFee.toFixed(2),
        notes: '以上费用仅供参考，具体以法院实际收取为准。'
      }
    }

    return {
      claimAmount,
      isSimple,
      calculationResult,
      canCalculate,
      calculateFee
    }
  }
}
</script>
